---
id: shadows
title: Shadows
---

import Playground from '@theme/Playground';

import './shadows.styles.css';

## Various Elevations

### Low

The lowest elevation possible, used to give a slight sense of depth above the page. Use the `shadow--lw` class to achieve this effect.

<div class="shadows-demo">
  <Playground>
    <div class="item shadow--lw">Low Elevation</div>
  </Playground>
</div>

### Medium

A medium elevation, used in dropdowns and mobile navigation. Use the `shadow--md` class to achieve this effect.

<div class="shadows-demo">
  <Playground>
    <div class="item shadow--md">Medium Elevation</div>
  </Playground>
</div>

### Tall

The tallest elevation possible, used in modals. Use the `shadow--tl` class to achieve this effect.

<div class="shadows-demo">
  <Playground>
    <div class="item shadow--tl">Tall Elevation</div>
  </Playground>
</div>
